<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-18 17:11:59
 * @LastEditTime: 2024-06-19 16:21:46
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 拖拽设计区域
 * @FilePath: \chu-meng\client\src\pages\Design\components\DesignArea\DragDesignArea\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="dragDesignArea">

    <grid-layout
      v-model:layout="layout"
      :col-num="24"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :static="item.static"
      >
        {{ item.name }}
        <!-- <MyTasks
          v-if="item.name === '我的模块1'"
          :id="item.i"
          @deletePanelItemEvent="deletePanelItem"
        />
        <MyData
          v-if="item.name === '我的模块2'"
          :id="item.i"
          @deletePanelItemEvent="deletePanelItem"
        />
        <MyModel
          v-if="item.name === '我的模块3'"
          :id="item.i"
          @deletePanelItemEvent="deletePanelItem"
        />
        <ModelRun
          v-if="item.name === '我的模块4'"
          :id="item.i"
          @deletePanelItemEvent="deletePanelItem"
        /> -->
      </grid-item>
    </grid-layout>
    
    <div class="itxst">
      <div>
        <draggable
          :list="state.list"
          ghost-class="ghost"
          chosen-class="chosenClass"
          animation="300"
          @start="onStart"
          @end="onEnd"
        >
          <template #item="{ element }">
            <div class="item">
              {{ element.name }}
            </div>
          </template>
        </draggable>
      </div>
      <div>{{ state.list }}</div>
    </div>
  </div>
</template>

<script setup>
// import {
//   FileOutlined,
//   CloseOutlined
// } from '@ant-design/icons-vue'
import { ref, reactive } from 'vue'
import draggable from 'vuedraggable'

const layout= [
  { x: 0, y: 0, w: 12, h: 3, i: 0, name: '我的模块1', static: true,},
  { x: 12, y: 0, w: 12, h: 3, i: 1, name: '我的模块2' },
  { x: 0, y: 8, w: 12, h: 3, i: 2, name: '我的模块3' },
  { x: 12, y: 8, w: 12, h: 3, i: 3, name: '我的模块4' },
]

/*
draggable 对CSS样式没有什么要求万物皆可拖拽
:list="state.list"         //需要绑定的数组
ghost-class="ghost"        //被替换元素的样式
chosen-class="chosenClass" //选中元素的样式
animation="300"            //动画效果
@start="onStart"           //拖拽开始的事件
@end="onEnd"               //拖拽结束的事件
*/
const state = reactive({
  //需要拖拽的数据，拖拽后数据的顺序也会变化
  list: [
    { name: "www.itxst.com", id: 0 },
    { name: "www.baidu.com", id: 1 },
    { name: "www.google.com", id: 2 },
  ],
});

//拖拽开始的事件
const onStart = () => {
  console.log("开始拖拽");
};

//拖拽结束的事件
const onEnd = () => {
  console.log("结束拖拽");
  console.log(layout)
};

</script>

<style lang="scss" scoped>
.dragDesignArea{
  width: 100%;
  height: calc(100vh - 177px);
  overflow: hidden;

  .vue-grid-item{
    background-color: #f00;
  }
  
  .itxst {
    width: 600px;
    display: flex;
  }
  .itxst > div:nth-of-type(1) {
    flex: 1;
  }
  .itxst > div:nth-of-type(2) {
    width: 270px;
    padding-left: 20px;
  }
  .item {
    border: solid 1px #eee;
    padding: 6px 10px;
    text-align: left;
  }

  .item:hover {
    cursor: move;
  }
  .item + .item {
    margin-top: 10px;
  }
  .ghost {
    border: solid 1px rgb(19, 41, 239);
  }
  .chosenClass {
    background-color: #f1f1f1;
  }
}
</style>
